<script>
import { reactive, toRefs } from "vue";
import FlowhW10to14 from "@/components/Charts/LineCharts/inoutFlow/W/FlowhW10to14.vue";
import FlowhW14to18 from "@/components/Charts/LineCharts/inoutFlow/W/FlowhW14to18.vue";
import FlowhW18to22 from "@/components/Charts/LineCharts/inoutFlow/W/FlowhW18to22.vue";
import GenBagW from "@/components/Charts/LineCharts/inoutFlow/W/GenBagW.vue";
export default {
  components: {FlowhW10to14,FlowhW14to18,FlowhW18to22,GenBagW,
  },
  setup() {
    const state = reactive({
      labelListW10to14: ["10:00", "11:00", "12:00", "13:00", "14:00"],
      labelListW14to18: ["14:00", "15:00", "16:00", "17:00", "18:00"],
      labelListW18to22: ["18:00", "19:00", "20:00", "21:00", "22:00"],
      dataListFlowW10to14: [
        175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      ],
      dataListFlowW14to18:[
      160, 208, 125, 109, 170, 159, 209, 109, 201, 175,      
      ],
      dataListFlowW18to22:[
      100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      ],
      
      dataListGBW:[100, 209, 109, 201],
    });
    return { ...toRefs(state) };
  },
}
</script>
<template>
 <div style="display: flex; height:50%">
   <FlowhW10to14 :labelListW10to14="labelListW10to14" :dataListFlowW10to14="dataListFlowW10to14" />
   <FlowhW14to18 :labelListW14to18="labelListW14to18" :dataListFlowW14to18="dataListFlowW14to18" />
   <FlowhW18to22 :labelListW18to22="labelListW18to22" :dataListFlowW18to22="dataListFlowW18to22" />
 </div>
 <div style="display: flex; height:50%">
  <GenBagW :dataListGBW="dataListGBW" />
 </div>
</template>
<style scoped>
</style>
